<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    TailwindCSS
                </h2>
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">

        <div class="max-w-3xl prose prose-sm">

            <p>
                As per the official page of Tailwind CSS, it is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke
                designs without any annoying opinionated styles you have to fight to override.
            </p>
            <p>
                To simply put, Tailwind provides helper classes for almost every CSS rule available. Fuse includes and uses Tailwind by default and it can be used in any part of
                the theme.
            </p>

            <h2>Official docs</h2>
            <p>
                Official Tailwind CSS documentation:
                <a
                    class="link"
                    href="https://tailwindcss.com/"
                    rel="noreferrer"
                    target="_blank">https://tailwindcss.com/
                </a>
            </p>

        </div>

    </div>

</div>
